<script setup lang="ts">
    import {NConfigProvider,NPopover,NButton,NAvatar} from 'naive-ui'
    import { computed, ref, watch,onMounted,onBeforeMount,defineAsyncComponent } from 'vue'
    import {NaiveProvider} from '@/components/common'
    import {useTheme} from '@/hooks/useTheme'
    import {useLanguage} from '@/hooks/useLanguage'
    import {useBasicLayout} from '@/hooks/useBasicLayout'
    import { useAppStore, useChatStore } from '@/store'
    import type { Theme } from '@/store/modules/app/helper'
    import { SvgIcon } from '@/components/common'
    import { useUserStore } from '@/store'
    import defaultAvatar from '@/assets/avatar.jpg'
    import { isString } from '@/utils/is'
    import {UserInfo} from "@/typings/user"
    import {getUserInfo,loginOut} from "@/api/user"
    import { useRouter,useRoute } from 'vue-router'
    const PoPupDialogs = defineAsyncComponent(() => import('@/components/common/PoPupDialogs/index.vue'))
    import {record} from '@/components/common'
    import {userCenter} from '@/components/common'
    import {tradeCenter} from '@/components/common'

    const show = ref<boolean>(false)
    const showUserInfo = ref<boolean>(false)
    const showTradeCenter = ref<boolean>(false)

    const {theme, themeOverrides} = useTheme()
    const {language} = useLanguage()
    const {isMobile} = useBasicLayout()

    const appStore = useAppStore()

    const userStore = useUserStore()

    let userInfo = ref(computed(() => userStore.userInfo))

    watch(
        userInfo,
        (val) => {
            userStore.updateUserInfo(val)
        }
    )
    const showRecord = ref(false)
    const setTheme = computed(() => appStore.theme)
    const themeOptions: { label: string; key: Theme; icon: string }[] = [
        {
            label: 'Auto',
            key: 'auto',
            icon: 'ri:contrast-line',
        },
        {
            label: 'Light',
            key: 'light',
            icon: 'ri:sun-foggy-line',
        },
        {
            label: 'Dark',
            key: 'dark',
            icon: 'ri:moon-foggy-line',
        },
    ]

    function changeTheme() {
        let value = setTheme.value;
        if(value == 'light'){
            appStore.setTheme('dark')
				}else{
            appStore.setTheme('light')
				}

    }

	function alterTishi() {
			alert("还没开放")
  }

    function showUserMoney() {
        showRecord.value = !showRecord.value;
    }

    const router = useRouter()
    function login() {
        router.push('/login')
    }

    function showPoPup() {
        show.value = true
    }

    async function showUserCenter() {
        let newUserInfo = await getUserInfo<UserInfo>()
        if (newUserInfo && newUserInfo.id) {
            userStore.updateUserInfo(newUserInfo)
            showUserInfo.value = true
        }else{
            alert("登陆失效！ 请重新登陆")
            router.push('/Login')
				}
    }


    function showUserTradeCenter() {
        showTradeCenter.value = true
    }
    const route = useRoute()

		onMounted(()=>{
        if(route.name =='Chat'){
            activeIndex.value = 0
        }else if(route.name =='apiChat'){
            activeIndex.value = 1
        }else if(route.name =='aide'){
            activeIndex.value = 2
        }else if(route.name =='Draw'){
            activeIndex.value = 3
        }
		})


    const activeIndex = ref(0)
    function handleButtonClick(index) {
        activeIndex.value = index;
        if(index==0){
            if(route.name !=='Chat'){
                router.push('/chat')
						}
				}else if(index==1){
            if(route.name !=='apiChat'){
                router.push('/api/chat')
            }
				}else if(index==2){
            if(route.name !=='aide'){
                router.push('/aide')
            }
				}else if(index==3){
            if(route.name !=='Draw'){
                router.push('/draw')
            }
				}else{
            router.push('/')
				}
    }

</script>

<template>
	<div v-if="!isMobile" class="left-div">
		<div class="flex min-w-[70px] items-center justify-center bg-[#f7faff] px-2 py-4 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800 flex-col w-sider h-full border-r">
			<a href="/" class="router-link-active">
				<img src="/src/assets/avatar.jpg" class="py-4 w-10 border-b cursor-pointer px=0 dark:border-[#ffffff17] border-#ebebeb-400" alt=""><!---->
			</a>
			<main class="flex-1 flex-grow-1 flex flex-col pt-5 items-center">
				<div class="flex flex-col space-y-4">

					<span aria-current="page" :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 0 }" @click="handleButtonClick(0)">
						<n-popover :overlap="overlap" placement="right"  >
							<template #trigger>
						<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
							<div class="flex h-full">
								<div class="m-auto text-center">
									<SvgIcon icon="basil:chat-solid" width="28" height="28" />
								</div>
							</div>
						</div><!---->
							</template>
							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">AI会话</span>
						</n-popover>
					</span>


					<span aria-current="page"  :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 1 }" @click="handleButtonClick(1)">
						<!---->
						<n-popover :overlap="overlap" placement="right"  >
							<template #trigger>
						<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
							<div class="flex h-full">
								<div class="m-auto text-center">
									<SvgIcon icon="icon-park-solid:tool" width="28" height="28" />
								</div>
							</div>
						</div><!---->
							</template>
							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">AI对话测试工具</span>
						</n-popover>
					</span>

<!--					<span :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify&#45;&#45;ri': activeIndex === 2 }" @click="handleButtonClick(2)">&lt;!&ndash;&ndash;&gt;-->
<!--						<n-popover :overlap="overlap" placement="right"  >-->
<!--							<template #trigger>-->
<!--						<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">-->
<!--							<div class="flex h-full">-->
<!--								<div class="m-auto text-center">-->
<!--									<SvgIcon icon="ep:menu" width="28" height="28" />-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>&lt;!&ndash;&ndash;&gt;-->
<!--							</template>-->
<!--							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">Prompt模板</span>-->

<!--						</n-popover>-->
<!--					</span>-->


					<span :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 3 }" @click="handleButtonClick(3)"><!---->
						<n-popover :overlap="overlap" placement="right"  >
							<template #trigger>
									<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
										<div class="flex h-full">
											<div class="m-auto text-center">
												<SvgIcon icon="fluent:draw-image-24-filled" width="28" height="28" />
											</div>
										</div>
									</div>
							</template>
							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">AI绘画工具</span>
						</n-popover>
					</span>
				</div>
			</main>
			<div  >
				<NButton style="border: none; border-radius: 20px;" block @click="showPoPup">
					联系我们
				</NButton>
				<br>
			</div>

			<div v-if=" userInfo && userInfo.id" >
				<NButton style="border: none; border-radius: 20px;" block @click="showUserTradeCenter">
					交易中心
				</NButton>
				<br>
			</div>

<!--			<div v-if=" userInfo && userInfo.id" >-->
<!--				<NButton style="border: none; border-radius: 20px;" block @click="showUserMoney">-->
<!--					会话记录-->
<!--				</NButton>-->
<!--				<br>-->
<!--			</div>-->

			<button @click="changeTheme"
				class="flex h-8 w-8 items-center mb-5 justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]">
									<span class="text-base text-slate-500 dark:text-slate-400">
										<svg xmlns="http://www.w3.org/2000/svg"
												 xmlns:xlink="http://www.w3.org/1999/xlink"
												 aria-hidden="true" role="img"
												 class=" iconify iconify--fluent" width="1em"
												 height="1em" viewBox="0 0 24 24"><path
											fill="currentColor"
											d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"></path>
										</svg>
									</span>
			</button>

<!--			浮现显示主题选择-->
			<n-popover v-if="false" :overlap="overlap" placement="right" trigger="click" >
				<template #trigger>
					<button @click="changeTheme"
									class="flex h-8 w-8 items-center mb-5 justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]">
									<span class="text-base text-slate-500 dark:text-slate-400">
										<svg xmlns="http://www.w3.org/2000/svg"
												 xmlns:xlink="http://www.w3.org/1999/xlink"
												 aria-hidden="true" role="img"
												 class=" iconify iconify--fluent" width="1em"
												 height="1em" viewBox="0 0 24 24"><path
											fill="currentColor"
											d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"></path>
										</svg>
									</span>
					</button>
				</template>

				<template v-for="item of themeOptions" :key="item.key">
					<NButton
						size="small"
						:type="item.key === setTheme ? 'primary' : undefined"
						@click="appStore.setTheme(item.key)">
						<template #icon>
							<SvgIcon :icon="item.icon" />
						</template>
					</NButton>
				</template>
			</n-popover>

			<!--					用户头像 -->
			<n-popover  v-if=" userInfo && userInfo.id" trigger="hover" placement="right">
				<template #trigger>
					<template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
						<NAvatar @click="showUserCenter"
							size="large"
							round
							:src="userInfo.avatar"
							:fallback-src="defaultAvatar"/>
					</template>
				</template>
				账号:&nbsp;{{ userInfo.account ?? "小可爱" }}<br>
				点击查看用户信息
			</n-popover>
			<div v-else >
				<NButton style=" border: none " block @click="login">
					{{ $t('store.loginButton') }}
				</NButton>
			</div>
			<br>
		</div>
		<!-- Content goes here -->
	</div>
	<PoPupDialogs v-model:visible="show"></PoPupDialogs>
<!--	<record   v-model:visible="showRecord"  />-->
	<userCenter   v-model:visible="showUserInfo"  />
	<tradeCenter   v-model:visible="showTradeCenter"  />
</template>
<style>
	.left-div {
		height: 100%;
		width: 70px;
		float: left;
		z-index: 9999999;
		background-color: #ddd; /* Change this to preferred color */
	}
	.main-content {
		margin-left: 80px;
		height: 100%;
	}
	.container {
		height: 93%;
	  overflow: auto;
	}
</style>
